<template>
  <div>
    <div class="home">
      <header-tab/>
      <div class="container">
        <div class="classtify-nav clearfix">
          <router-link
            id="add"
            :to ="{ path: '/home/tab'}"
            :class="{'active':isActive}" tag="p">流水</router-link>
          <router-link
            v-if="isShowDriver"
            to="/home/tab/driverNumber"
            tag="p">司机</router-link>
          <router-link
            to="/home/tab/passenger"
            tag="p">乘客</router-link>
          <router-link
            v-if="isShowLine"
            to="/home/tab/circuit" tag="p">线路</router-link>
        </div>
        <div :style="{'margin-top':computend}" class="home-content">
          <router-view/>
        </div>
      </div>
      <footer-tab/>
    </div>
  </div>
</template>
<script>
import footerTab from '@/components/footer/footer'
import headerTab from '@/components/header/header'
export default {
  components: {
    footerTab,
    headerTab
  },
  data () {
    return {
      isActive: true,
      isShowLine: true,
      isShowDriver: true,
      computend: ''
    }
  },
  watch: {
    $route (to, from) {
      // console.log(to)
      if (to === '/Home/tab') {
        this.isActive = true
      } else {
        this.isActive = false
      }
    }
  },

  mounted () {
    // console.log(this.$route.path)
    // userType 为 6 代表线路、 7 代表司机、 5 代表运营商
    let getRole = JSON.parse(sessionStorage.getItem('getRole'))
    let userType = getRole.userType
    if (userType === 6) {
      this.isShowLine = false
      this.computend = '4rem'
    } else if (userType === 7) {
      this.isShowDriver = false
      this.isShowLine = false
      this.computend = '4rem'
    }
    if (this.$route.path !== '/Home/tab') {
      this.isActive = false
    }
  }
}

</script>
<style lang="scss" src="../../pages/Home/home.scss"></style>
